<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文章分析 - 舆情分析系统</title>
    <link rel="stylesheet" href="../../lib/layui/css/layui.css">
    <link rel="stylesheet" href="../../css/common.css">
    <style>
        .container {
            padding: 20px;
            background: #f5f5f5;
            min-height: 100vh;
        }
        
        .page-header {
            background: white;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .page-title {
            font-size: 24px;
            font-weight: bold;
            color: #333;
            margin: 0;
        }
        
        .filter-section {
            background: white;
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .chart-container {
            background: white;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .chart-title {
            font-size: 18px;
            font-weight: bold;
            color: #333;
            margin-bottom: 20px;
        }
        
        .chart-wrapper {
            height: 400px;
        }
        
        .stats-cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 20px;
        }
        
        .stat-card {
            background: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            text-align: center;
        }
        
        .stat-number {
            font-size: 28px;
            font-weight: bold;
            color: #1890ff;
            margin-bottom: 10px;
        }
        
        .stat-label {
            color: #666;
            font-size: 14px;
        }
        
        .article-preview {
            background: white;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .article-item {
            border-bottom: 1px solid #f0f0f0;
            padding: 15px 0;
        }
        
        .article-item:last-child {
            border-bottom: none;
        }
        
        .article-title {
            font-size: 16px;
            font-weight: bold;
            color: #333;
            margin-bottom: 10px;
            cursor: pointer;
        }
        
        .article-title:hover {
            color: #1890ff;
        }
        
        .article-meta {
            display: flex;
            gap: 20px;
            font-size: 12px;
            color: #666;
            margin-bottom: 10px;
        }
        
        .article-summary {
            color: #666;
            line-height: 1.6;
            margin-bottom: 10px;
        }
        
        .article-tags {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }
        
        .article-tag {
            background: #f0f0f0;
            color: #666;
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 12px;
        }
        
        .sentiment-badge {
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 12px;
            color: white;
        }
        
        .sentiment-positive {
            background: #52c41a;
        }
        
        .sentiment-negative {
            background: #ff4d4f;
        }
        
        .sentiment-neutral {
            background: #faad14;
        }
        
        .loading {
            text-align: center;
            padding: 50px;
            color: #999;
        }
    </style>
</head>
<body>
    <div id="app" class="container">
        <!-- 页面头部 -->
        <div class="page-header">
            <h1 class="page-title">文章分析</h1>
        </div>

        <!-- 筛选条件 -->
        <div class="filter-section">
            <form class="layui-form" lay-filter="filterForm">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">发布时间</label>
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input" id="dateRange" placeholder="请选择日期范围">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">平台</label>
                        <div class="layui-input-inline">
                            <select name="platform" lay-filter="platform">
                                <option value="">全部平台</option>
                                <option value="weibo">微博</option>
                                <option value="zhihu">知乎</option>
                                <option value="douyin">抖音</option>
                                <option value="bilibili">B站</option>
                                <option value="toutiao">头条</option>
                                <option value="douban">豆瓣</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">情感</label>
                        <div class="layui-input-inline">
                            <select name="sentiment" lay-filter="sentiment">
                                <option value="">全部情感</option>
                                <option value="positive">正面</option>
                                <option value="negative">负面</option>
                                <option value="neutral">中性</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">关键词</label>
                        <div class="layui-input-inline">
                            <input type="text" name="keyword" placeholder="请输入关键词" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button type="button" class="layui-btn" @click="searchData">查询</button>
                        <button type="button" class="layui-btn layui-btn-primary" @click="resetFilter">重置</button>
                    </div>
                </div>
            </form>
        </div>

        <!-- 统计卡片 -->
        <div class="stats-cards">
            <div class="stat-card">
                <div class="stat-number">{{ stats.totalArticles }}</div>
                <div class="stat-label">总文章数</div>
            </div>
            <div class="stat-card">
                <div class="stat-number">{{ stats.avgSentiment }}</div>
                <div class="stat-label">平均情感得分</div>
            </div>
            <div class="stat-card">
                <div class="stat-number">{{ stats.avgReadCount }}</div>
                <div class="stat-label">平均阅读量</div>
            </div>
            <div class="stat-card">
                <div class="stat-number">{{ stats.avgCommentCount }}</div>
                <div class="stat-label">平均评论数</div>
            </div>
        </div>

        <!-- 文章情感分布 -->
        <div class="chart-container">
            <h3 class="chart-title">文章情感分布</h3>
            <div id="sentimentChart" class="chart-wrapper"></div>
        </div>

        <!-- 平台文章分布 -->
        <div class="chart-container">
            <h3 class="chart-title">平台文章分布</h3>
            <div id="platformChart" class="chart-wrapper"></div>
        </div>

        <!-- 文章热度趋势 -->
        <div class="chart-container">
            <h3 class="chart-title">文章热度趋势</h3>
            <div id="trendChart" class="chart-wrapper"></div>
        </div>

        <!-- 热门文章列表 -->
        <div class="article-preview">
            <h3 class="chart-title">热门文章列表</h3>
            <div v-if="loading" class="loading">加载中...</div>
            <div v-else>
                <div class="article-item" v-for="article in articles" :key="article.id">
                    <div class="article-title" @click="viewArticle(article)">
                        {{ article.title }}
                    </div>
                    <div class="article-meta">
                        <span>平台: {{ article.platform }}</span>
                        <span>发布时间: {{ article.publishTime }}</span>
                        <span>阅读量: {{ article.readCount }}</span>
                        <span>评论数: {{ article.commentCount }}</span>
                        <span>点赞数: {{ article.likeCount }}</span>
                        <span class="sentiment-badge" :class="getSentimentClass(article.sentiment)">
                            {{ getSentimentText(article.sentiment) }}
                        </span>
                    </div>
                    <div class="article-summary">{{ article.summary }}</div>
                    <div class="article-tags">
                        <span class="article-tag" v-for="tag in article.tags" :key="tag">{{ tag }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 引入依赖 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="../../lib/echarts/echarts.min.js"></script>
    <script src="../../lib/layui/layui.js"></script>
    <script src="../../js/api.js"></script>
    
    <script>
        new Vue({
            el: '#app',
            data: {
                stats: {
                    totalArticles: 0,
                    avgSentiment: 0,
                    avgReadCount: 0,
                    avgCommentCount: 0
                },
                articles: [],
                sentimentChart: null,
                platformChart: null,
                trendChart: null,
                filterParams: {
                    startDate: '',
                    endDate: '',
                    platform: '',
                    sentiment: '',
                    keyword: ''
                },
                loading: false
            },
            mounted() {
                this.initLayui();
                this.initCharts();
                this.loadData();
            },
            methods: {
                // 初始化Layui
                initLayui() {
                    layui.use(['form', 'laydate'], () => {
                        const form = layui.form;
                        const laydate = layui.laydate;
                        
                        // 初始化日期选择器
                        laydate.render({
                            elem: '#dateRange',
                            type: 'date',
                            range: true,
                            done: (value) => {
                                if (value) {
                                    const dates = value.split(' - ');
                                    this.filterParams.startDate = dates[0];
                                    this.filterParams.endDate = dates[1];
                                }
                            }
                        });
                        
                        form.render();
                    });
                },

                // 初始化图表
                initCharts() {
                    this.sentimentChart = echarts.init(document.getElementById('sentimentChart'));
                    this.platformChart = echarts.init(document.getElementById('platformChart'));
                    this.trendChart = echarts.init(document.getElementById('trendChart'));
                },

                // 加载数据
                async loadData() {
                    try {
                        this.loading = true;
                        
                        // 加载统计数据
                        await this.loadStats();
                        
                        // 加载文章列表
                        await this.loadArticles();
                        
                        // 加载图表数据
                        await this.loadChartData();
                        
                    } catch (error) {
                        console.error('加载数据失败:', error);
                        layui.use('layer', () => {
                            layui.layer.msg('加载数据失败', {icon: 2});
                        });
                    } finally {
                        this.loading = false;
                    }
                },

                // 加载统计数据
                async loadStats() {
                    try {
                        const response = await API.opinion.getArticleStats(this.filterParams);
                        this.stats = response;
                    } catch (error) {
                        console.error('加载统计数据失败:', error);
                        // 使用模拟数据
                        this.stats = {
                            totalArticles: 1250,
                            avgSentiment: 0.42,
                            avgReadCount: 8500,
                            avgCommentCount: 120
                        };
                    }
                },

                // 加载文章列表
                async loadArticles() {
                    try {
                        const response = await API.opinion.getArticles(this.filterParams);
                        this.articles = response;
                    } catch (error) {
                        console.error('加载文章列表失败:', error);
                        // 使用模拟数据
                        this.articles = this.getMockArticles();
                    }
                },

                // 加载图表数据
                async loadChartData() {
                    try {
                        const response = await API.opinion.getArticleCharts(this.filterParams);
                        this.updateCharts(response);
                    } catch (error) {
                        console.error('加载图表数据失败:', error);
                        // 使用模拟数据
                        this.updateCharts(this.getMockChartData());
                    }
                },

                // 更新图表
                updateCharts(data) {
                    this.updateSentimentChart(data);
                    this.updatePlatformChart(data);
                    this.updateTrendChart(data);
                },

                // 更新情感分布图表
                updateSentimentChart(data) {
                    const positive = data.sentimentDistribution?.positive || 45;
                    const neutral = data.sentimentDistribution?.neutral || 35;
                    const negative = data.sentimentDistribution?.negative || 20;
                    
                    const option = {
                        tooltip: {
                            trigger: 'item',
                            formatter: '{a} <br/>{b}: {c} ({d}%)'
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left'
                        },
                        series: [
                            {
                                name: '情感分布',
                                type: 'pie',
                                radius: ['40%', '70%'],
                                avoidLabelOverlap: false,
                                label: {
                                    show: false,
                                    position: 'center'
                                },
                                emphasis: {
                                    label: {
                                        show: true,
                                        fontSize: '18',
                                        fontWeight: 'bold'
                                    }
                                },
                                labelLine: {
                                    show: false
                                },
                                data: [
                                    { value: positive, name: '正面', itemStyle: { color: '#52c41a' } },
                                    { value: neutral, name: '中性', itemStyle: { color: '#faad14' } },
                                    { value: negative, name: '负面', itemStyle: { color: '#ff4d4f' } }
                                ]
                            }
                        ]
                    };
                    this.sentimentChart.setOption(option);
                },

                // 更新平台分布图表
                updatePlatformChart(data) {
                    const platforms = data.platformDistribution?.platforms || ['微博', '知乎', '抖音', 'B站', '头条', '豆瓣'];
                    const counts = data.platformDistribution?.counts || [320, 280, 250, 200, 150, 50];
                    
                    const option = {
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            data: platforms
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                name: '文章数',
                                type: 'bar',
                                data: counts
                            }
                        ]
                    };
                    this.platformChart.setOption(option);
                },

                // 更新趋势图表
                updateTrendChart(data) {
                    const dates = data.trendData?.dates || ['01-01', '01-02', '01-03', '01-04', '01-05', '01-06', '01-07'];
                    const readCounts = data.trendData?.readCounts || [1200, 1320, 1010, 1340, 900, 2300, 2100];
                    const commentCounts = data.trendData?.commentCounts || [120, 132, 101, 134, 90, 230, 210];
                    
                    const option = {
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: ['阅读量', '评论数']
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: dates
                        },
                        yAxis: [
                            {
                                type: 'value',
                                name: '阅读量',
                                position: 'left'
                            },
                            {
                                type: 'value',
                                name: '评论数',
                                position: 'right'
                            }
                        ],
                        series: [
                            {
                                name: '阅读量',
                                type: 'line',
                                yAxisIndex: 0,
                                data: readCounts
                            },
                            {
                                name: '评论数',
                                type: 'line',
                                yAxisIndex: 1,
                                data: commentCounts
                            }
                        ]
                    };
                    this.trendChart.setOption(option);
                },

                // 获取模拟文章数据
                getMockArticles() {
                    return [
                        {
                            id: 1,
                            title: '人工智能技术发展现状与未来趋势分析',
                            platform: '知乎',
                            publishTime: '2024-01-15 10:30',
                            readCount: 15000,
                            commentCount: 320,
                            likeCount: 850,
                            sentiment: 'positive',
                            summary: '本文深入分析了当前人工智能技术的发展现状，包括机器学习、深度学习、自然语言处理等领域的突破性进展...',
                            tags: ['人工智能', '技术', '发展趋势']
                        },
                        {
                            id: 2,
                            title: '新能源汽车市场前景广阔，但挑战依然存在',
                            platform: '微博',
                            publishTime: '2024-01-15 09:15',
                            readCount: 12000,
                            commentCount: 280,
                            likeCount: 650,
                            sentiment: 'neutral',
                            summary: '随着环保意识的提升和政策的支持，新能源汽车市场呈现出蓬勃发展的态势...',
                            tags: ['新能源汽车', '市场', '环保']
                        },
                        {
                            id: 3,
                            title: '互联网大厂裁员潮背后的深层思考',
                            platform: '头条',
                            publishTime: '2024-01-15 08:45',
                            readCount: 18000,
                            commentCount: 450,
                            likeCount: 920,
                            sentiment: 'negative',
                            summary: '近期各大互联网公司纷纷传出裁员消息，这背后反映了什么样的行业变化？',
                            tags: ['互联网', '裁员', '行业分析']
                        },
                        {
                            id: 4,
                            title: '教育行业数字化转型加速推进',
                            platform: 'B站',
                            publishTime: '2024-01-15 07:30',
                            readCount: 8500,
                            commentCount: 180,
                            likeCount: 420,
                            sentiment: 'positive',
                            summary: '疫情加速了教育行业的数字化转型，在线教育、智慧课堂等新模式正在改变传统教育方式...',
                            tags: ['教育', '数字化转型', '在线教育']
                        },
                        {
                            id: 5,
                            title: '医疗科技创新助力健康中国建设',
                            platform: '抖音',
                            publishTime: '2024-01-15 06:20',
                            readCount: 9500,
                            commentCount: 220,
                            likeCount: 580,
                            sentiment: 'positive',
                            summary: '随着医疗技术的不断进步，人工智能、大数据等技术在医疗领域的应用越来越广泛...',
                            tags: ['医疗', '科技创新', '健康中国']
                        }
                    ];
                },

                // 获取模拟图表数据
                getMockChartData() {
                    return {
                        sentimentDistribution: {
                            positive: 45,
                            neutral: 35,
                            negative: 20
                        },
                        platformDistribution: {
                            platforms: ['微博', '知乎', '抖音', 'B站', '头条', '豆瓣'],
                            counts: [320, 280, 250, 200, 150, 50]
                        },
                        trendData: {
                            dates: ['01-01', '01-02', '01-03', '01-04', '01-05', '01-06', '01-07'],
                            readCounts: [1200, 1320, 1010, 1340, 900, 2300, 2100],
                            commentCounts: [120, 132, 101, 134, 90, 230, 210]
                        }
                    };
                },

                // 获取情感样式类
                getSentimentClass(sentiment) {
                    const classes = {
                        'positive': 'sentiment-positive',
                        'negative': 'sentiment-negative',
                        'neutral': 'sentiment-neutral'
                    };
                    return classes[sentiment] || 'sentiment-neutral';
                },

                // 获取情感文本
                getSentimentText(sentiment) {
                    const texts = {
                        'positive': '正面',
                        'negative': '负面',
                        'neutral': '中性'
                    };
                    return texts[sentiment] || '中性';
                },

                // 查看文章详情
                viewArticle(article) {
                    layui.use('layer', () => {
                        layui.layer.open({
                            type: 1,
                            title: article.title,
                            area: ['800px', '600px'],
                            content: `
                                <div style="padding: 20px;">
                                    <h3>${article.title}</h3>
                                    <p><strong>平台:</strong> ${article.platform}</p>
                                    <p><strong>发布时间:</strong> ${article.publishTime}</p>
                                    <p><strong>阅读量:</strong> ${article.readCount}</p>
                                    <p><strong>评论数:</strong> ${article.commentCount}</p>
                                    <p><strong>点赞数:</strong> ${article.likeCount}</p>
                                    <p><strong>情感:</strong> ${this.getSentimentText(article.sentiment)}</p>
                                    <p><strong>摘要:</strong> ${article.summary}</p>
                                    <p><strong>标签:</strong> ${article.tags.join(', ')}</p>
                                </div>
                            `
                        });
                    });
                },

                // 查询数据
                searchData() {
                    this.loadData();
                },

                // 重置筛选条件
                resetFilter() {
                    this.filterParams = {
                        startDate: '',
                        endDate: '',
                        platform: '',
                        sentiment: '',
                        keyword: ''
                    };
                    layui.use('form', () => {
                        layui.form.val('filterForm', this.filterParams);
                    });
                    this.loadData();
                }
            }
        });

        // 响应式处理
        window.addEventListener('resize', () => {
            const app = document.querySelector('#app').__vue__;
            if (app.sentimentChart) app.sentimentChart.resize();
            if (app.platformChart) app.platformChart.resize();
            if (app.trendChart) app.trendChart.resize();
        });
    </script>
</body>
</html>